import React, { Suspense, lazy, useState } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import ajax from "../modules/ajax";
import { Loading } from "../component/loading";
import { userInformData } from "./header/vo/vo";
import { SyncOutlined } from "@ant-design/icons";
import { Button, ConfigProvider, Image } from "antd";
import moment from 'moment';
import 'moment/locale/zh-cn';
import zhCN from 'antd/lib/locale/zh_CN';
import "./router.less";

moment.locale('zh-cn');
// import Header from "./header/app";
const Header = lazy(() => import("./header/app"));
// import ApiApp from "./api/api";
const ApiApp = lazy(() => import("./api/api"));
// import StartCon from "./start/start";
const StartCon = lazy(() => import("./start/start"));
// import Login, { LoginId, Register } from "./login/api";
const Login = lazy(() => import("./login/api"))
// import { ProjectMenu } from "./project/projectmenu";
const ProjectMenu = lazy(() => import("./project/projectmenu"));
// import Settings from "./settings/api";
const Settings = lazy(() => import("./settings/api"));
// import { TestApp } from "./test/index";
const TestApp = lazy(() => import("./test/index"));
const UserSpaceApp = lazy(() => import("./userspace/index"));

export const LoginStateContext = React.createContext({
    state: false,
    setState: (v: any): any => { },
    userData: {} as userInformData,
    setUserData: (v: any): any => { }
})


export function Routers() {
    const [state, setState] = useState(false);
    const [userData, setUserData] = useState({})
    if (sessionStorage.getItem("token")) {
        ajax.config.headers = {
            "token": sessionStorage.getItem("token")
        }
    }
    return (
        <ConfigProvider locale={zhCN}>
            <LoginStateContext.Provider value={{ state: state, setState: setState, userData: userData as userInformData, setUserData: setUserData }}>
                <Router>
                    <Suspense fallback={
                        <div
                            style={{
                                height: "100vh",
                                width: "100vw",
                                display: "flex",
                                justifyContent: "center",
                                alignItems: "center"
                            }}
                        >
                            <Loading size={40} color="#096dd9" />
                        </div>
                    }>
                        <Route path="/" exact component={Home} />
                        <Route path="/index" component={Header} />
                        <Route path="/index/start" component={StartCon} />
                        <Route path="/index/user" component={Login} />
                        {/* <Route path="/index/login-id" component={LoginId} />
            <Route path="/index/register" component={Register} /> */}
                        <Route path="/index/project" component={ProjectMenu} />
                        <Route path="/index/project/apis" component={ApiApp} />
                        <Route path="/index/project/settings" component={Settings} />
                        <Route path="/index/project/test" component={TestApp} />
                        <Route path="/index/userspace" component={UserSpaceApp} />
                    </Suspense>
                </Router>
            </LoginStateContext.Provider>
        </ConfigProvider>
    )
}
const Home = () => {
    const [random_1, setRandom_1] = useState(1);
    const [random_2, setRandom_2] = useState(2);
    const [show, setShow] = useState(true);
    const toggleImg = () => {
        toggleShow();
        setTimeout(() => {
            if(random_2 < random_1) {
                setRandom_2((random_2) => {
                    return random_1+1
                })
            } else {
                setRandom_1((random_1) => {
                    return random_2+1
                })
            }
        }, 800)
    }
    const toggleShow = () => {
        setShow((show) => {
            return !show
        })
    }
    return (
        <div>
            <Image
                className={show ? "show" : "hide"}
                style={{
                    position: "fixed",
                    top: 0,
                    height: "100vh",
                    width: "100vw",
                }}
                src={`https://picsum.photos/1980/980?random=${show?(random_1<random_2?random_1:random_2):(random_1>random_2?random_1:random_2) }`}
                
            >


            </Image>
            <Image
                className={!show ? "show" : "hide"}
                style={{
                    position: "fixed",
                    top: 0,
                    height: "100vh",
                    width: "100vw",
                }}
                src={`https://picsum.photos/1980/980?random=${!show?(random_1<random_2?random_1:random_2):(random_1>random_2?random_1:random_2)}`}
              
            />
            <Button
                onClick={toggleImg}
                shape="circle"
                size="large"
                style={{
                    position: "fixed",
                    bottom: 100,
                    right: 30,
                    cursor: "pointer"
                }}
                icon={<SyncOutlined style={{ fontSize: 20 }} />}
            ></Button>
            <footer style={{
                position: "fixed",
                bottom: 0,
                width: "100%",
                display: "flex",
                justifyContent: "center",
                backgroundColor: "#444",
                color: "#aaa",
                height: "50px",
                lineHeight: "50px"
            }}>
                <div>备案号:</div>
                <div><a style={{ color: "#aaa", textDecoration: "line" }} target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=61011602000416">陕ICP备2021004715号-1</a></div>
            </footer>
        </div>
    )
}